<template>
    <el-tabs type="card" v-model="active" @tab-click="change">
        <el-tab-pane v-for="t in tabList" :key="t.key" :label="t.label">
            <slot :data="t" :active="active"/>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: 'BaseTabCard',
    props: {
        tabList: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data () {
        return {
            active: '0'
        };
    },
    methods: {
        change () {
            this.$emit('change', this.active, this.tabList);
        }
    }
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/common.less";

/deep/ .el {
    &-tabs__header {
        margin-bottom: 2.67rem;
        border-bottom: 0;

        .el-tabs__nav,
        .el-tabs__item {
            border: 0;
        }
    }

    &-tabs__item {
        min-width: 3rem;
        // height: 2.08rem;
        padding: 0.8rem 0.5rem;
        line-height: 2.08rem;
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        color: #767C93;
        // border-radius: .06rem .06rem 0 0;
        border: 0;
        margin-right: 4rem;
        &:nth-child(2) {
            padding-left: 0.5rem !important;
        }

        &.is-active {
            // background: @theme-color;
            color: #333;
            border: 0;
            border-bottom: 0.25rem solid;
            border-bottom-color: @theme-backgroundColor-primary !important;
        }
    }
}
</style>
